<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" style="min-height: 900px;">
      <h6 class="common-title">开通VIP站</h6>
      <div class="myorderbox common-form-set">
        <el-form
          ref="form"
          class="vip-site-create-form"
          :model="form">
          <el-form-item
            label="客户编号">
            <el-input
              :value="user.localUserID"
              disabled>
            </el-input>
          </el-form-item>

          <el-form-item
            label="套餐选择">
            <el-table
              :data="packageList">
              <el-table-column
                label="选择">
                <template slot-scope="{ row }">
                  <el-radio
                    v-model="form.subPackageID"
                    :label="row.subPackageID"
                    @change="getCost(row.editionID)">
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="套餐名称">
              </el-table-column>
              <el-table-column
                label="价格">
                <template slot-scope="{ row }">
                  {{ row.money }}元
                </template>
              </el-table-column>
              <el-table-column
                label="赠送级别">
                <template slot-scope="{ row }">
                  {{ row.level.levelName }}
                </template>
              </el-table-column>
              <el-table-column
                prop="subPackageID"
                label="版本">
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            label="二级域名"
            class="flex-form-item">
            http://
            <el-input
              v-model="form.domainPre"
              style="margin-left: 10px;"
              placeholder="请输入二级域名前缀">
            </el-input>
            <el-select
              style="margin-left: 10px;"
              placeholder="请选择域名"
              v-model="form.domainID">
              
              <!-- <el-option
                v-for="item in domainList"
                :key="item.domainID"
                :value="item.domainID"
                :label="item.domainAddr">
              </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item
            label="网站名称"
            prop="siteName">
            <el-input
              v-model="form.siteName"
              placeholder="请输入网站名称">
            </el-input>
          </el-form-item>
          <el-form-item
            label="网站风格">
            <el-select
              v-model="form.style"
              placeholder="默认">
              <el-option
                v-for="item in siteStyles"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="搭建扣费">
            <el-input
              v-model="form.cost"
              placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item
            label="登录名">
            <el-input
              v-model="form.login"
              placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item
            label="QQ">
            <el-input
              v-model="form.qq"
              placeholder="">
            </el-input>
          </el-form-item>
          <el-form-item
            label="交易密码">
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入您的交易密码">
            </el-input>
          </el-form-item>
          <el-form-item label=" ">
            <el-button
              style="width:unset;"
              type="primary"
              @click="add">
              确认开通
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import pageMixin from '@/mixins/page'
import { mapState } from 'vuex'
export default {
  layout: 'webIn4',
  components: {

  },
  mixins: [pageMixin],
  data() {
    return {
      isLoading: true,
      siteStyles: [
        {
          name: '默认',
        },
        {
          name: '传统风格-蓝色',
        },
        {
          name: '经典风格-黑色',
        },
        {
          name: '商城风格-白色',
        },
        {
          name: '简约风格-白色',
        },
        {
          name: '时尚风格-红色',
        },
        {
          name: '清新风格-白色',
        },
      ],
      packageList: [],
      rules: {
        siteName: [
          { required: true, message: '请输入站点名称', trigger: 'blur' }
        ],
        qq: [
          { required: true, message: '请输入qq', trigger: 'blur' }
        ],
        login: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        qq: [{ required: true, message: '请输入QQ', trigger: 'blur' }],
        domainPre: [
          { required: true, message: '请输入域名前缀 ', trigger: 'blur' }
        ],
        domainID: [
          { required: true, message: '请选择域名', trigger: 'change' }
        ],
        subPackageID: [
          { required: true, message: '请选择套餐', trigger: 'change' }
        ]
      },
      domainList: [],
      form: {
        siteName: '',
        subPackageID: '',
        domainPre: '',
        domainID: '',
        login: '',
        password: '',
        qq: '',
        style: '',
        cost: '',
      },
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  mounted() {
    this.getStyle()
    this.getDomainList()
    this.getPackageList()
  },
  methods: {
    selectRadio(row) {
      this.form.subPackageID = row.subPackageID
    },
    selectRow(row) {
      this.form.subPackageID = row.subPackageID
    },
    getCost(val) {
      this.$axios.get('/platform/siteSitePrice/getSitePrice', {
        params: {
          editionID: val
        }
      }).then((res) => {
        this.form.cost = res.body.price
      })
    },
    add() {
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$axios
            .post('/platform/site/addSubForUser', this.form)
            .then((res) => {
              if (res.code === 1001) {
                this.$message.success('操作成功！')
                this.visible = false
              }
            })
        } else {
          return false
        }
      })
    },
    getStyle() {
      const styleMapping = {
        "backendStyle": '后台风格',
        "fakaStyle": '发卡网风格',
        "frontStyle": '前台风格',
      }
      const styleKeys = Object.keys(styleMapping)
      this.siteStyles = []
      this.$axios.get('/site/systemStyle/getForClient').then((res) => {
        if(!res.body) return
        Object.keys(res.body).forEach(key => {
          if(styleKeys.includes(key)) {
            this.siteStyles.push({
              name: styleMapping[key],
              id: res.body[key]
            })
          }
        })
      })
    },
    getPackageList() {
      this.$axios.get('/site/subPackage/list').then((res) => {
        this.packageList = res.body
      })
    },
    getDomainList() {
      this.$axios.get('/platform/systemDomain/list').then((res) => {
        this.domainList = res.body
      })
    }
  }
}
</script>
<style>
@import 'assets/style/el-adapter.css';
</style>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';
</style>

<style lang="scss">
.has-gutter {
  th,
  .el-form-item__content {
    line-height: 5px;
  }
}
.vip-site-create-form {
  margin-left: 70px;
  .el-radio__label {
    display: none;
  }
  .el-form-item {
    display: flex;

    &__content {
      width: 570px;
      display: flex;
      > * {
        width: 570px;
      }
    }

    &__label {
      min-width: 100px;
    }
    .el-input__inner {
      width: 100%;
    }
  }
}
</style>
